<div style="height: 150px; width: 300px; margin: 20px 0;">
  <!-- 使用传入的 chart_id -->
  <canvas id="{{ chart_id }}"></canvas>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('{{ chart_id }}');
    if (ctx) {
      new Chart(ctx.getContext('2d'), {
        type: 'bar',
        data: {
          labels: ['origin','optimized'],
          datasets: [
            // 第一个数据集：Latency（左侧Y轴）
            {
              label: 'Latency (ms)',
              data: [12, 19],  // 延迟数据
              backgroundColor: 'rgba(255, 99, 132, 0.8)',
              borderWidth: 1,
              yAxisID: 'y-latency'  // 关联到左侧Y轴
            },
            // 第二个数据集：Memory（右侧Y轴）
            {
              label: 'Memory (MB)',
              data: [256, 512],  // 内存数据
              backgroundColor: 'rgba(54, 162, 235, 0.8)',
              borderWidth: 1,
              yAxisID: 'y-memory'  // 关联到右侧Y轴
            }
          ]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            // 左侧Y轴（Latency）
            'y-latency': {
              type: 'linear',
              display: true,
              position: 'left',
              title: {
                display: true,
                text: 'Latency (ms)',
                color: 'rgba(255, 99, 132, 1)'
              },
              grid: {
                drawOnChartArea: true,
                color: 'rgba(255, 99, 132, 0.1)'
              },
              ticks: {
                color: 'rgba(255, 99, 132, 1)'
              },
              beginAtZero: true
            },
            // 右侧Y轴（Memory）
            'y-memory': {
              type: 'linear',
              display: true,
              position: 'right',
              title: {
                display: true,
                text: 'Memory (MB)',
                color: 'rgba(54, 162, 235, 1)'
              },
              grid: {
                drawOnChartArea: false,  // 不在图表区域绘制网格线
              },
              ticks: {
                color: 'rgba(54, 162, 235, 1)'
              },
              beginAtZero: true
            },
            x: {
              grid: {
                display: false
              }
            }
          },
          plugins: {
            legend: {
              position: 'top',
              labels: {
                usePointStyle: true,
                padding: 20
              }
            },
            tooltip: {
              mode: 'index',
              intersect: false
            }
          }
        }
      });
    } else {
      console.error('Canvas element not found with ID:', '{{ chart_id }}');
    }
  });
</script>